<template>
	<view :style="{ '--color': color }" class="Moneyall">
		<navBar title="充值"></navBar>
		<view class="money">
			<text class="color_33 size28">充值金额</text>
			<view class="moneyNum">
				<text class="black size50">￥</text>
				<input type="digit" class="MoneyVal" v-model="inputNum" placeholder="请输入充值金额" placeholder-class="place"
					@focus="flagTip = false" @blur="Blur" @input="Input" />
			</view>
			<view class="TipShow">
				<view class="Tips color_ff4" v-if="flagTip">{{Tips}}</view>
				<view class="color_99 size26">{{ desc }}</view>
			</view>
		</view>

		<view class="content">
			<view class="Topup_activity">
				<text class="black size32">选择充值金额</text>
				<view class="Topup_activity_box">
					<view class="activity_list" @click="changeActive(item)" :class="{ Active: activitysId == item.id }"
						v-for="item in activitys" :key="item.id">
						<text class="money_val">￥{{ item.limit }}</text>
						<text class="explain ellipsis_3">{{ item.desc }}</text>
					</view>
				</view>
			</view>

			<view class="Instructions" v-if="purse.recharge_rule">
				<text class="black size32">余额说明</text>
				<view class="rows m-top30">
					<u-parse :content="purse.recharge_rule" :domain="imgUrl"></u-parse>
				</view>
			</view>
		</view>

		<view class="topUp">
			<view class="topUp_btn" @click="submits">立即充值</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import Api from '@/common/Api.js'
	export default {
		data() {
			return {
				imgUrl: this.imgUrl,
				purse: '',
				activitys: [],
				activitysId: '',
				Shut: 0, // 闭合

				inputNum: '',
				RechargeData: '',
				flagTip: false,
				desc: '',
				timer: null,
				Tips: '请输入充值金额'
			}
		},

		onShow() {
			this.myMoney()
			let options = wx.getEnterOptionsSync()
			if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3' && this.Shut == 1) {
				let extraData = options.referrerInfo.extraData
				if (!extraData) return
				if (extraData.code == 'success') this.$Toast('充值成功')
			}
		},

		methods: {
			async myMoney() {
				const result = await Api.myMoney()
				this.purse = result
				this.activitys = result.activitys || []
				// if (!this.activitys.length) return
				// this.activitysId = this.activitys[0].id
				// this.inputNum = this.activitys[0].limit
				this.getRechargeAct()
			},

			async submits() {
				this.$showLoading('')
				const result = await Api.recharge(this.inputNum, this.RechargeData.aesId, this.RechargeData
					.aesVerifyCode)
				this.$hideLoading()
				if (result.extraData) {
					this.Shut = 1
					wx.openEmbeddedMiniProgram({
						appId: result.appId,
						extraData: result.extraData
					})
					return
				}
				const Payment = await this.$pop.getPayment(result)
				if (Payment) this.myMoney()
			},

			getRechargeAct() {
				//获取当前充值金额能有的优惠
				this.$http
					.post({
						url: '/SRA_memberRecharge/getRechargeAct',
						data: {
							VeriCode: this.bid,
							vId: this.vid,
							money: this.inputNum
						}
					})
					.then((res) => {
						if (res.code != 100) return this.$Toast(res.notice)
						const result = res.data
						this.RechargeData = result
						this.desc = result.desc ?? ''
					})
			},

			changeActive(item) {
				this.activitysId = item.id
				this.inputNum = item.limit
				this.flagTip = false
				this.getRechargeAct()
			},

			Blur(event) {
				const value = event.detail.value
				const reg = /(\d*\.\d{2})\d*/
				if (!value) {
					this.flagTip = true
					this.Tips = '请输入充值金额'
					return
				}

			},

			// Input() {
			// 	let value = this.inputNum
			// 	this.$nextTick(() => {
			// 		this.inputNum = this.inputNum.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')
			// 	})
			// 	console.log(this.inputNum);
			// },
			Input(event) {
				const Val = event.detail.value
				if (this.timer) clearTimeout(this.timer)
				if (!Val) return (this.desc = '')
				if (this.activitys.length) this.contrast()
				this.timer = setTimeout(() => {
					this.getRechargeAct()
					this.timer = null
				}, 800)
			},

			contrast() {
				const Value = this.activitys.findIndex((item) => item.limit == this.inputNum)
				if (Value == -1) return (this.activitysId = '')
				this.activitysId = this.activitys[Value].id
			}
		},
		computed: {
			...mapState(['vid', 'color', 'bid', 'share'])
		},
		onUnload() {
			this.Shut = 0
		},
		onShareAppMessage(option) {
			return {
				title: this.share.title,
				desc: this.share.desc,
				path: '/pages/index/index?share_v_id=' + this.vid,
				imageUrl: this.share.imageUrl
			}
		}
	}
</script>

<style scoped lang="scss">
	.Moneyall {
		width: 100%;
		padding-bottom: 160rpx;
	}

	.money {
		width: 100%;
		padding: 50rpx 50rpx 30rpx 50rpx;
		border-bottom: 1rpx solid #f2f2f2;
	}

	.moneyNum {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.MoneyVal {
		flex: 1;
		height: 100%;
		padding-left: 10rpx;
		font-size: 54rpx;
		color: #000;
	}

	/deep/.place {
		color: #ccc;
		font-size: 36rpx;
	}

	.content {
		width: 100%;
		background-color: #ffffff;
		padding: 50rpx;
	}

	.Topup_activity {
		width: 100%;
	}

	.Topup_activity_box {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 40rpx;
		margin-top: 30rpx;
		margin-bottom: 40rpx;
	}

	.activity_list {
		width: 100%;
		height: 220rpx;
		padding: 10rpx;
		border: 1px solid #cccccc;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.money_val {
		color: #000;
		font-size: 52rpx;
	}

	.explain {
		color: var(--color);
		font-size: 26rpx;
		margin-top: 10rpx;
		text-align: center;
	}

	.Active {
		border: 1px solid var(--color) !important;
	}

	.Custom_title {
		color: var(--color);
		font-size: 26rpx;
	}

	.Instructions {
		width: 100%;
		margin-top: 50rpx;
	}

	.topUp {
		width: 100%;
		background-color: #ffffff;
		padding: 20rpx 40rpx 60rpx 40rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 666;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7rpx 29rpx 0px;
	}

	.topUp_btn {
		width: 100%;
		height: 80rpx;
		background-color: var(--color);
		border-radius: 10rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 30rpx;
	}

	.TipShow {
		width: 100%;
		min-height: 50rpx;
		padding-left: 62rpx;
	}

	.Tips {
		font-size: 26rpx;
	}
</style>